<template>
  <v-app-bar flat order="1" title="Application bar">
    <template #prepend>
      <v-icon
        @click="store.drawerOpen()"
        class="icon-btn"
        end
        :icon="store.drawer ? 'mdi-menu-close' : 'mdi-menu-open'"
      />
    </template>
    <AppBarPlugins class="mr-5" />

    <v-menu open-on-hover>
      <template #activator="{ props }">
        <v-avatar color="red" v-bind="props">
          <span class="text-h5">CJ</span>
          <!-- <v-img alt="John" src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img> -->
        </v-avatar>
      </template>
      <UserMenuList />
    </v-menu>
  </v-app-bar>
</template>

<script setup lang="ts">
import UserMenuList from "@/components/global/UserMenuList.vue";
import AppBarPlugins from "@/components/common/AppBarPlugins.vue";
import { useLayoutStore } from "@/stores/layoutStore";
const store = useLayoutStore();
</script>
